<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar class="navbar">
      <template #title>
        <van-button
          plain
          type="info"
          icon="search"
          round
          class="search-btn"
          @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <van-tabs v-model="active">
      <van-tab :title="obj.name" v-for="obj in MyChannels" :key="obj.id">
        <article-list :channelId="obj.id"></article-list>
      </van-tab>

      <span
        class="toutiao toutiao-gengduo"
        swipeable
        @click="isShowEdit = true"
      ></span>
    </van-tabs>

    <!-- 频道编辑弹出层 -->
    <van-popup
      v-model="isShowEdit"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '100%', width: '100%' }"
    >
      <!-- 在原生事件中$event代表的是事件对象，在vue的自定义事件中，$event代表的是触发事件函数传递过来的一个参数 -->
      <edit-popup
        :channelList="MyChannels"
        @updata-active=";[(active = $event), (isShowEdit = false)]"
        @delate-channel="delMyChannel"
        @addChannel="addMyChannel"
      ></edit-popup>
    </van-popup>
  </div>
</template>

<script>
import { getChannelAPI, delMyChannelAPI, addMyChannelAPI } from '@/api'
import EditPopup from './components/EditPopup.vue'
import ArticleList from './components/ArticleList.vue'
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'Home',
  data() {
    return {
      active: 0,
      MyChannels: [],
      isShowEdit: false
    }
  },
  created() {
    // 调用初始化的仓库数据
    this.inintMychannels()
  },
  computed: {
    ...mapGetters(['isLogin'])
  },
  methods: {
    ...mapMutations(['SET_MY_CHANNELS']),

    async getChannels() {
      const { data } = await getChannelAPI()
      this.MyChannels = data.data.channels
    },

    // 初始化仓库数据
    async inintMychannels() {
      // 如果客户是登录状态
      if (this.Login) {
        /**
         * 登录，发请求，携带token
         */
        this.getChannels()
      } else {
        // 没登陆的状态，两个情况，一个本地有数据，一个本地没有数据
        // 拿到本地的数据
        const { myChannels } = this.$store.state
        if (myChannels.length > 0) {
          this.MyChannels = myChannels
        } else {
          // 没有登录的化就是获取默认的请求数据，然后保存到本地vuex,因为this.getChannels()是异步的，所以这里要要异步
          await this.getChannels()
          this.SET_MY_CHANNELS(this.MyChannels)
        }
      }
    },
    async delMyChannel(id) {
      // 删除分为两步
      // 发送请求删除数据库，再删除视图层,这个函数带掉只有成功了才会执行下面的函数，否则不会执行下面的函数
      try {
        this.$toast.loading({
          message: '删除频道中...',
          forbidClick: true
        })

        const newMyChannels = this.MyChannels.filter((item) => item.id !== id)
        if (this.isLogin) {
          await delMyChannelAPI(id)
        } else {
          // 储存数据到本地
          this.SET_MY_CHANNELS(newMyChannels)
        }

        this.MyChannels = newMyChannels

        // 都删除了提示一下删除频道成功
        this.$toast.success('删除频道成功')
      } catch (error) {
        this.$toast.fail('删除频道失败')
      }
    },
    async addMyChannel(mychennel) {
      try {
        this.$toast.loading({
          message: '添加频道中...',
          forbidClick: true
        })

        // 发送请求
        if (this.isLogin) {
          await addMyChannelAPI(mychennel.id, this.MyChannels.length)
        } else {
          // 储存数据到本地
          this.SET_MY_CHANNELS([...this.MyChannels, mychennel])
        }

        // 视觉添加
        this.MyChannels.push(mychennel)

        this.$toast.success('添加频道成功')
      } catch (error) {
        this.$toast.fail('添加频道失败')
      }
    }
  },
  components: {
    ArticleList,
    EditPopup
  }
}
</script>

<style scoped lang="less">
:deep(.navbar) {
  background-color: #3296fa;
  .van-nav-bar__title {
    max-width: unset;
  }
  .van-icon {
    color: #fff;
  }
}
.search-btn {
  width: 7.4rem;
  height: 0.85333rem;
  color: #fff;
  background-color: #5babfb;
  border: unset;
}
/* tabs导航条样式 */
:deep(.van-tabs__wrap) {
  padding-right: 66px;

  .van-tabs__nav {
    padding-left: 0;
    padding-right: 0;

    /* tab标签 */
    .van-tab {
      border: 1px solid #eee;
      width: 200px;
      height: 82px;
    }

    /* tab标签下划线 */
    .van-tabs__line {
      width: 31px;
      height: 6px;
      background-color: #3296fa;
      bottom: 40px;
    }
  }
}

/* 字体图标 */
.toutiao-gengduo {
  position: absolute;
  top: 0;
  right: 0;
  width: 66px;
  height: 82px;
  font-size: 40px;
  line-height: 82px;
  text-align: center;
  opacity: 0.6;
  border-bottom: 1px solid #eee;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 1px;
    background-image: url('~@/assets/images/gradient-gray-line.png');
  }
}
</style>
